<template>
	<div class="tools-warp">
		<el-card shadow="hover">
			<div slot="header">
				<div style=" display: flex;align-items: center;">
					<el-input v-model="parms.keyword" placeholder="请输入学员姓名" style="margin-right: 10px; width: 200px;"
						clearable></el-input><el-button type="primary" @click="sherchQuer">查询</el-button> <el-button
						type="success" @click="addcanpus">添加</el-button>
					<el-button type="success" @click="exportcanpus(1)" style="margin-right: 10px;">下载模板</el-button>
					<el-upload class="upload-demo" action="https://www.fbty.tech/api/studentinfo/parseExcel"
						:on-success="handleSuccess" multiple :headers="headers" :show-file-list="false"
						:before-upload="beforeAvatarUpload" :limit="1">
						<el-button type="primary">批量导入</el-button>
					</el-upload>
					<!-- <el-button type="success" @click="exportcanpus(2)">批量导入</el-button> -->
					<el-button type="success" @click="exportcanpus(3)" style="margin-left: 10px;">批量导出</el-button>
				</div>
			</div>
			<el-table :data="tableData" stripe style="width: 100%">
				<!-- <el-table-column prop="date" label="LOGO" align="center">
					<template>
						<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
						</el-image>
					</template>

				</el-table-column> -->
				<el-table-column prop="name" label="学员姓名" align="center" width="100px">
				</el-table-column>
				<el-table-column prop="campusName" label="校区名称" align="center">
				</el-table-column>
				<el-table-column prop="phone" label="课程名称" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.studentCourse.length > 0">{{scope.row.studentCourse[0].courseName}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="phone" label="学员电话" align="center" >
				</el-table-column>
				<el-table-column prop="createDate" label="录入日期" align="center">
				</el-table-column>
				<el-table-column prop="isCare" label="是否关注" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.isCare == 1">已关注</span>
						<span v-else>未关注</span>
					</template>
				</el-table-column>
				<el-table-column prop="isSign" label="是否签约" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.isSign">已签约</span>
						<span v-else>未签约</span>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="remarks" label="备注" align="center">
				</el-table-column> -->
				<el-table-column fixed="right" label="操作" width="350px" align="center">
					<template slot-scope="scope">
						<el-button @click="codeClick(scope.row)" type="success" size="small">生成二维码</el-button>
						<el-button @click="handleEdit(scope.row)" type="warning" size="small" :disabled="!scope.row.isSign">预览</el-button>
						<el-button @click="endClick(scope.row)" type="primary" size="small">编辑</el-button>
						<el-button @click="handleClick(scope.row)" type="danger" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="padding: 20px 0;">
				<el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</el-card>
		<el-dialog :title="texts" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="学员姓名" prop="name">
					<el-input v-model="ruleForm.name" placeholder="请输入学员姓名"></el-input>
				</el-form-item>
				<el-form-item label="学员电话" prop="phone">
					<el-input v-model="ruleForm.phone" maxlength="11" placeholder="请输入学员电话"></el-input>
				</el-form-item>
				<el-form-item label="校区" prop="campusId">
					<el-select v-model="ruleForm.campusId" placeholder="请选择校区" style="width: 100%;">
						<el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="录入日期" prop="date">
					<el-date-picker v-model="ruleForm.date" type="date"  value-format="yyyy-MM-dd" placeholder="请选择录入日期" style="width: 100%;">
					</el-date-picker>
				</el-form-item> -->
				<el-form-item label="备注">
					<el-input v-model="ruleForm.remarks" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="请输入备注"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="resetForm('ruleForm')">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="二维码" :visible.sync="imngVisible" width="30%">
			<!-- <el-image :src="src"></el-image> -->
			<div style="padding: 0 60px 0px;">
				<img :src="src" alt="" style="width: 100%;">
			</div>
			<div style="text-align: center;padding-bottom: 10px;font-weight: bold;" v-if="codeItem">
				微信扫描二维码，掌握 {{codeItem.name}} 的学习动向
			</div>
			<div style="text-align: center;">
				关注成都富搏体育微信公众号<br/>享受高质量教育服务
			</div>
			<!-- <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span> -->
		</el-dialog>
        <el-dialog title="预览" :visible.sync="dialoglook" width="90%">
			<div>
                 <embed  :src="pdfUrl"
                    type="application/pdf"
                    width="100%"
                    height="800px">
                        </div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialoglook=false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { allAdminApi } from '@/api/allapi';
import fileDownload from "js-file-download";
import { Session } from '@/utils/storage';
const adminApi = allAdminApi();
export default {
    name: 'campus',
    data() {

        return {
            dialoglook:false,
            pdfUrl:"",

            imageUrl: '',
            input: "",
            texts: '添加学员信息',
            dialogVisible: false,
            options: [],
            tableData: [],
            total: 0,
            ruleForm: {
                name: '',
                phone: '',
                date: '',
                remarks: '',
                campusId: '',
            },
            miniparms: {
                keyword: "",
            },
            parms: {
                limit: 10,
                page: 1,
                keyword: "",
            },
            rules: {
                name: [
                    { required: true, message: '请输入校区名称', trigger: 'change' },
                ],
                phone: [
                    { required: true, message: '请输入校区电话', trigger: 'change' },
                ],
                date: [
                    { required: true, message: '请选择录入日期', trigger: 'change' },
                ],
                campusId: [
                    { required: true, message: '请选择校区', trigger: 'change' },
                ],
            },
            fileList: [],
            headers: { Authorization: 'bearer ' + `${Session.get('token')}` },
            imngVisible:false,
            src: '',
            codeItem:null,
        };
    },
    mounted() {
        this.campusListApi();
        this.sherchList()
    },
    methods: {
        handleSuccess(res) {
            this.$message({
                type: 'success',
                message: '导入成功!'
            });
            this.sherchList()
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'application/x';
            const isLt2M = file.size / 1024 / 1024 < 5;

            // if (!isJPG) {
            // 	this.$message.error('文件只能是 PDF 格式!');
            // }
            if (!isLt2M) {
                this.$message.error('文件大小不能超过 5MB!');
            }
            return isLt2M;
        },
        campusListApi() {
            adminApi.listNotPage(this.miniparms).then((res) => {
                if (res.code == 200) {
                    this.options = res.result;
                }
            })
        },
        sherchQuer() {
            this.parms.page = 1
            this.sherchList()
        },
        handleCurrentChange(val) {
            this.parms.page = val
            this.sherchList()
        },
        sherchList() {
            adminApi.studentinfoList(this.parms).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.result;
                    this.total = res.count;
                }
            })
        },
        codeClick(row) {
            this.codeItem = row 
            this.imngVisible = true
            this.src = `https://www.fbty.tech/api/studentinfo/generateQrCode/${row.id}`
            
            // adminApi.generateQrCodeApi(row.id).then((res) => {
                    
            // 	this.imngVisible = true
            // 			this.src = res
            // 	})
            
        },
        handleEdit(row) {
            this.dialoglook = true;
            this.pdfUrl = row.signFilePath;
        },
        endClick(row) {
            this.texts = "编辑学员信息";
            this.ruleForm = row
            this.dialogVisible = true;
        },
        handleClick(row) {
            this.$confirm('此操作将永久删除该学员, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                adminApi.deletestudentinfo(row.id).then((res) => {
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.sherchList()
                    }
                })
            })
        },
        resetForm(formName) {
            this.ruleForm.password = "";
            this.ruleForm.textarea = "";
            this.$refs[formName].resetFields();
            this.dialogVisible = false;
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    adminApi.studentinfoApi(this.ruleForm).then((res) => {
                        if (res.code == 200) {
                            this.$message.success(res.msg);
                            this.$refs[formName].resetFields();
                            this.ruleForm.remarks = "";
                            this.sherchQuer()
                            this.dialogVisible = false
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        addcanpus() {
            this.texts = "添加学员信息";
            this.dialogVisible = true;
        },
        exportcanpus(index) {
            if (index == 1) {
                adminApi.dolondsApi({ filePath: 'https://www.fbty.tech/classHourSystem/学员信息导入模板.xlsx' }).then((res) => {
                    fileDownload(res, `学员信息导入模板.xlsx`);
                })
            }
            if (index == 3) {
                adminApi.exportExcelApi({ keyword: this.parms.keyword }).then((res) => {
                    fileDownload(res, `学员信息.xlsx`);
                })
            }
        },
    },
};
</script>

<style lang="scss">
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>